<template>
  <h2>Vuex Api useStore</h2>
  <h3>num1: {{ $store.state.num1 }}</h3>
  <h3>getter-num1: {{ $store.getters.double1 }}</h3>
  <button @click="cnum1(33)">update-num1:{{ $store.state.num1 }}</button>
  <button @click="cactioNum1()">action-update-num1:{{ $store.state.num1 }}</button>
  <hr>
  <h3>num2:{{ num2 }}</h3>
  <h3>getter-double2:{{ double2 }}</h3>
  <button @click="cnum2(33)">update-num2:{{ num2 }}</button>
  <button @click="cactioNum2">action-update-num2:{{ num2 }}</button>
</template>

<script>
import {useStore} from 'vuex'
import {computed} from "vue";

export default {
  name: "VuexApi",
  setup() {
    const store = useStore()

    return {
      //不用ref，就是响应式的了
      num2: computed(() => store.state.num2),
      double2: computed(() => store.getters.double2),
      cnum2: (newnum) => {
        store.commit('changenum2', newnum)
      },
      cactioNum2: () => {
        store.dispatch('timecnum2')
      }
    }
  },
  methods: {
    cnum1(newnum) {
      this.$store.commit('changenum1', newnum)
    },
    cactioNum1() {
      this.$store.dispatch('timecnum1')
    }
  }
}
</script>

<style scoped>

</style>
